<section class="" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="container max-w-xl p-6 py-12 mx-auto space-y-24 lg:px-8 lg:max-w-7xl">
		<div class="">
			<h2
				class="text-3xl font-bold tracking-tight text-center sm:text-5xl"
				[ngClass]="['text' + contrastInv]"
			>
				Aliquip definiebas ad est
			</h2>
			<p class="max-w-3xl mx-auto mt-4 text-xl text-center" [ngClass]="['text' + plainInv]">
				Quando cetero his ne, eum admodum sapientem ut.
			</p>
		</div>
		<div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
			<div class="">
				<h3
					class="text-2xl font-bold tracking-tight sm:text-3xl"
					[ngClass]="['text' + contrastInv]"
				>
					Ad vix debet docendi
				</h3>
				<p class="mt-3 text-lg" [ngClass]="['text' + plainInv]">
					Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut,
					persius eripuit quo id. Sit te euismod tacimates.
				</p>
				<div class="mt-12 space-y-12">
					<div class="flex">
						<div class="flex-shrink-0">
							<div
								class="flex items-center justify-center w-12 h-12 rounded-md"
								[ngClass]="['bg' + primary, 'text' + contrast]"
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									fill="none"
									class="w-7 h-7"
									viewBox="0 0 24 24"
									stroke="currentColor"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M5 13l4 4L19 7"
									/>
								</svg>
							</div>
						</div>
						<div class="ml-4">
							<h4
								class="text-lg font-medium leading-6"
								[ngClass]="['text' + contrastInv]"
							>
								Per ei quaeque sensibus
							</h4>
							<p class="mt-2" [ngClass]="['text' + plainInv]">
								Ex usu illum iudico molestie. Pro ne agam facete mediocritatem,
								ridens labore facete mea ei. Pro id apeirian dignissim.
							</p>
						</div>
					</div>
					<div class="flex">
						<div class="flex-shrink-0">
							<div
								class="flex items-center justify-center w-12 h-12 rounded-md"
								[ngClass]="['bg' + primary, 'text' + contrast]"
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									fill="none"
									class="w-7 h-7"
									viewBox="0 0 24 24"
									stroke="currentColor"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M5 13l4 4L19 7"
									/>
								</svg>
							</div>
						</div>
						<div class="ml-4">
							<h4
								class="text-lg font-medium leading-6"
								[ngClass]="['text' + contrastInv]"
							>
								Cu imperdiet posidonium sed
							</h4>
							<p class="mt-2" [ngClass]="['text' + plainInv]">
								Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit
								tibique cu nec. Nec ex maluisset inciderint, ex quis.
							</p>
						</div>
					</div>
					<div class="flex">
						<div class="flex-shrink-0">
							<div
								class="flex items-center justify-center w-12 h-12 rounded-md"
								[ngClass]="['bg' + primary, 'text' + contrast]"
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									fill="none"
									class="w-7 h-7"
									viewBox="0 0 24 24"
									stroke="currentColor"
								>
									<path
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="2"
										d="M5 13l4 4L19 7"
									/>
								</svg>
							</div>
						</div>
						<div class="ml-4">
							<h4
								class="text-lg font-medium leading-6"
								[ngClass]="['text' + contrastInv]"
							>
								Nulla omittam sadipscing mel ne
							</h4>
							<p class="mt-2" [ngClass]="['text' + plainInv]">
								At sed possim oporteat probatus, justo graece ne nec, minim commodo
								legimus ut vix. Ut eos iudico quando soleat, nam modus.
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="mt-10 lg:mt-0" aria-hidden="true">
				<img
					class="mx-auto rounded-lg shadow-lg bg-gray-500"
					src="https://source.unsplash.com/random/360x480"
					alt=""
				/>
			</div>
		</div>

		<div class="">
			<div class="grid lg:gap-8 lg:grid-cols-2 lg:items-center">
				<div class="lg:col-start-2">
					<h3
						class="text-2xl font-bold tracking-tight sm:text-3xl"
						[ngClass]="['text' + contrastInv]"
					>
						Eam nibh gloriatur ex
					</h3>
					<p class="mt-3 text-lg" [ngClass]="['text' + plainInv]">
						Per odio fabellas consulatu cu. Utroque detracto mel ea, quo te latine
						theophrastus. Ea his tale nibh dissentias, mei exerci tamquam euripidis cu.
					</p>
					<div class="mt-12 space-y-12">
						<div class="flex">
							<div class="flex-shrink-0">
								<div
									class="flex items-center justify-center w-12 h-12 rounded-md"
									[ngClass]="['bg' + primary, 'text' + contrast]"
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										class="w-7 h-7"
										viewBox="0 0 24 24"
										stroke="currentColor"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M5 13l4 4L19 7"
										/>
									</svg>
								</div>
							</div>
							<div class="ml-4">
								<h4
									class="text-lg font-medium leading-6"
									[ngClass]="['text' + contrastInv]"
								>
									Cibo augue offendit has ad
								</h4>
								<p class="mt-2" [ngClass]="['text' + plainInv]">
									An per velit appellantur, ut utinam minimum nominavi sit, odio
									nostro habemus ne nec. Ne sonet regione contentiones est.
								</p>
							</div>
						</div>
						<div class="flex">
							<div class="flex-shrink-0">
								<div
									class="flex items-center justify-center w-12 h-12 rounded-md"
									[ngClass]="['bg' + primary, 'text' + contrast]"
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										class="w-7 h-7"
										viewBox="0 0 24 24"
										stroke="currentColor"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M5 13l4 4L19 7"
										/>
									</svg>
								</div>
							</div>
							<div class="ml-4">
								<h4
									class="text-lg font-medium leading-6"
									[ngClass]="['text' + contrastInv]"
								>
									At eum ferri luptatum lobortis
								</h4>
								<p class="mt-2" [ngClass]="['text' + plainInv]">
									Te per quidam maiorum ocurreret, etiam delicatissimi usu ad. Ne
									has quod periculis. Te sit primis iisque efficiantur.
								</p>
							</div>
						</div>
						<div class="flex">
							<div class="flex-shrink-0">
								<div
									class="flex items-center justify-center w-12 h-12 rounded-md"
									[ngClass]="['bg' + primary, 'text' + contrast]"
								>
									<svg
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										class="w-7 h-7"
										viewBox="0 0 24 24"
										stroke="currentColor"
									>
										<path
											stroke-linecap="round"
											stroke-linejoin="round"
											stroke-width="2"
											d="M5 13l4 4L19 7"
										/>
									</svg>
								</div>
							</div>
							<div class="ml-4">
								<h4
									class="text-lg font-medium leading-6"
									[ngClass]="['text' + contrastInv]"
								>
									Dicunt verterem evertitur eu sea
								</h4>
								<p class="mt-2" [ngClass]="['text' + plainInv]">
									Audire principes rationibus eam an, autem nominavi luptatum per
									te. Sumo fabulas vim eu, sonet saperet eleifend ut vix.
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="mt-10 lg:mt-0 lg:col-start-1 lg:row-start-1">
					<img
						class="mx-auto rounded-lg shadow-lg bg-gray-500"
						src="https://source.unsplash.com/random/361x481"
						alt=""
					/>
				</div>
			</div>
		</div>
	</div>
</section>
